<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.函数中的this，表示的调用函数的当前对象
        var a = "熊";//全局变量
        function fn() {
            var a = "羊";//局部变量
            console.log("局部变量:" + a);
            console.log("全局变量:" + window.a);
            console.log(this);//此处的this表示的是window，因为window调用的此函数
            console.log("全局变量:" + this.a);
        }
        // fn();
        window.fn();

        // 2.构造函数中的this，表示将来new出来的对象
        var name = "唐义";
        function Person(name, age) {
            //添加属性
            this.name = name;
            this.age = age;
            //添加方法
            this.show = function () {
                console.log(this.name);//coco  p.name
                console.log(this.age);//20 p.age
                console.log(name);//alice
                console.log(window.name);//唐义
            };
        }
        var p = new Person("alice", 20);
        p.name = "coco";
        p.show();



        // 3.函数绑定的this，表示的是事件源，触发事件的元素
        function show(obj) {
            console.log(obj);
        }

        window.onload = function () {
            var div = document.querySelector("div");
            div.onclick = function (e) {
                console.log(this);//指向于div
                console.log(e);//当前事件发生的相关信息全部记录在e这个事件event对象中
            };
        };


        function Student(name, age) {
            this.name = name;
            this.age = age;
            this.run = function () {
                console.log(this.name);//alice
                console.log(age);//20
                console.log(this.age);//  20
            }

        }

        var stu = new Student("alice", 20);
        stu.run();
        stu.age = 79;
        
    </script>
</head>

<body>
    <input type="button" value="按钮" onclick="show(this)">
    <div>mydiv
        <p>aaaaa</p>
    </div>
</body>

</html>